<ngbd-page-wrapper pageTitle="Introduction">
  <h3>
    Dependencies
  </h3>
  <p>
    This repository contains a set of native Angular directives based on Bootstrap's markup and CSS.
    As a result no dependency on jQuery or Bootstrap's JavaScript is required.
  </p>

  <p>
    Here is a list of minimal required versions of <a href="https://angular.io" target="_blank">Angular</a>
    and <a href="https://www.getbootstrap.com" target="_blank">Bootstrap</a> CSS for ng-bootstrap:
  </p>

  <table class="table" style="width: auto">
    <thead>
      <tr>
        <th scope="col">ng-bootstrap</th>
        <th scope="col">Angular</th>
        <th scope="col">Bootstrap CSS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1.x.x</th>
        <td>5.0.2</td>
        <td>4.0.0</td>
      </tr>
      <tr>
        <th scope="row">2.x.x</th>
        <td>6.0.0</td>
        <td>4.0.0</td>
      </tr>
      <tr>
        <th scope="row">3.x.x</th>
        <td>6.1.0</td>
        <td>4.0.0</td>
      </tr>
    </tbody>
  </table>

  <ngb-alert type="warning" [dismissible]="false">
    <p>Should I add <b>bootstrap.js</b> or <b>bootstrap.min.js</b> to my project?</p>

    No, the goal of ng-bootstrap is to <i>completely replace</i> JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.
  </ngb-alert>

  <h3>
    Supported browsers
  </h3>
  <p>We strive to support the same browsers and versions as supported by both Bootstrap 4 and Angular, whichever is more restrictive. Check browser support notes for
    <a href="https://angular.io/docs/ts/latest/guide/browser-support.html" target="_blank">Angular</a> and
    <a href="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/" target="_blank">Bootstrap</a>.
  </p>
  <p>Our code is automatically tested on all the supported browsers.</p>

  <h3>
    Installation
  </h3>
  <p>After installing the above dependencies, install <code>ng-bootstrap</code> via:</p>

  <ngbd-code [code]="codeInstall" lang="bash"></ngbd-code>

  <p>Once installed you need to import our main module.</p>

  <ngbd-code [code]="codeRoot" lang="typescript"></ngbd-code>

  <p>Alternatively you could only import modules with components you need, ex. pagination and alert.
    The resulting bundle will be smaller in this case.</p>

  <ngbd-code [code]="codeOther" lang="typescript"></ngbd-code>
  <br>

  <h4>
    SystemJS
  </h4>
  <p>
    If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
  </p>
  <p>
    In your systemjs config file, <code>map</code> needs to tell the System loader where to look for <code>ng-bootstrap</code>:
  </p>

  <ngbd-code [code]="codeSystem" lang="typescript"></ngbd-code>
  <br>

  <h3>
    Internationalization
  </h3>
  <p>
    Some components contain static English text or symbols that you might want to internationalize. Some of them appear
    on the screen, like for example the placeholders used in the timepicker input fields. Others appear in aria attributes
    used for accessibility.
  </p>
  <p>
    Internationalizing the ng-bootstrap components is done the same way as for any of your components, using the
    <a href="https://angular.io/guide/i18n#template-translations">process described in the Angular documentation</a>.
    The only difference is that we already did the first phase of this process: marking static text messages in the
    ng-bootstrap component templates for translation.
  </p>
  <p>
    So, if you execute `ng xi18n` on your project, you will also find the ng-bootstrap messages to translate in the
    generated messages file. All our messages are identified by an ID of the form <code>ngb.[widget].[message]</code>
  </p>

  <h3>
    Getting Help
  </h3>
  <p>
    Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports
    and feature requests. You've got much better chances of getting your question answered on
    <a href="https://stackoverflow.com/questions/tagged/ng-bootstrap" target="_blank">StackOverflow</a> where the community at large are looking
    at questions tagged with <code>ng-bootstrap</code>.
  </p>
  <p>
    StackOverflow is a much better place to ask questions since:
  </p>
  <ul>
    <li>there are hundreds of people willing to help on StackOverflow,</li>
    <li>questions and answers stay available for public viewing so your question / answer might help someone else, and</li>
    <li>the SO voting system assures that the best answers are prominently visible.</li>
  </ul>
  <p>
    To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
  </p>
  <h3>
    Contributing
  </h3>
  <p>
    We are always looking for the quality contributions! Please check the
    <a href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md" target="_blank">Contributing</a> doc
    for contribution guidelines. Additionally, for local building and testing information, please see our
    <a href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/DEVELOPER.md" target="_blank">Developer's Guide</a>.
  </p>
  <h3>
    Code of Conduct
  </h3>
  <p>
    Please take a moment to read our
    <a href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CODE_OF_CONDUCT.md" target="_blank">Code of Conduct</a>.
  </p>
</ngbd-page-wrapper>
